//resolve 用来拼接绝对路径的方法
// loader: 1.下载  2.使用（配置loader）
// plugins：1.下载 2.引入  3.使用
const {resolve} = require('path')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 使用需要安装cnpm i html-webpack-plugin -D 复制html插件
const miniCssExtractPlugin = require('mini-css-extract-plugin')// css文件从js中分离插件
const optimizeCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')// css文件压缩插件

// 设置nodejs环境变量 ==》 从而使css浏览器兼容使用那种兼容模式（默认使用production）
// process.env.NODE_ENV = 'development';
console.log('dd', resolve(__dirname, 'src/index.js'))
module.exports = {
  //入口文件
  entry: resolve(__dirname, 'src/index.js'),
  //出口文件
  output: {
    //出口文件名
    filename: "js/woqu.js",
    //出口文件地址  __dirname 是输出当前地址，这与后面一拼接就是输出文件地址
    path: resolve(__dirname, 'daye')
  },
  //loader的配置
  module: {
    rules: [
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组红loader执行顺序： 从右到左，从下到上 依次执行

          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          // 'style-loader',

          // 把css文件从js文件中分离出来
          miniCssExtractPlugin.loader,
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader',
          // css文件兼容性--start
          /*
            css兼容性处理：postcss --》 postcss-loader  postcss-preset-env
            帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容样式
              "browserslist": {
              // 开发环境
              "development": [
                // 兼容最近的一个chrome版本
                "lase 1 chrome version",
                "lase 1 firefox version",
                "lase 1 safari version"
              ],
              // 生产环境
              "production" : [
                // 兼容绝大部分浏览器
                ">0.2%",
                // 不兼容死的浏览器
                "not dead",
                // 不兼容op_mini浏览器
                "not op_mini all"
              ]
            }
          */
          // 使用loader的默认配置  写法： 'postcss-loader',
          // 下面是需要修改loader配置写法
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')
              ]
            }
          }
          // css文件兼容性--end
        ]
      },
      {
        // 处理图片也可不用，可用下面的替代
        // 处理图片资源
        // 处理不了html中的img图片
        test:/\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载url-loader file-loader
        loader:'url-loader',
        options:{
          // 图片小于8kb，就会被base64处理
          // 优点：减少请求数量
          // 缺点：图片体积会更大
          limit: 1 * 1024,
          // 问题：因为url - loader默认使用es6模块化解析，而html-loader使用commonjs引入图片
          // 解析时会出问题：  [object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的hash的前10位
          // [ext]取文件原来的扩展名
          name: '[hash:10].[ext]',
          // 图片放到daye/imgs地址下
          outputPath: 'imgs'
        },
      },
      {
        // 处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）
        // 下载html-loader
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 排除css，js，html资源
        // 下载file-loader
        exclude: /\.(css|js|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          // other放到daye/other地址下
          outputPath: 'other'
        }
      },
      /*
        语法检查： 只检查自己写的源代码，第三方的库是不用检查的
        设置检查规则：
        在package.json中eslintConfig设置：
          "eslintConfig": {
            "extends": "airbnb-base"
          }
      */
      {
        test: /\.js$/,
        // 排除检测第三方依赖的js代码
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint错误
          fix: true
        }
      },
    ]
  },
  //plugins的配置
  plugins: [
    // 功能：默认会创建一个空的HTML
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制：'./src/index.html'文件，并自动引入打包输出的所有资源（js/css）
      // template: './src/index.html',
      template: resolve(__dirname, 'src/index.html')
    }),
    // 插件定义 功能：把css文件从js文件中分离出来
    new miniCssExtractPlugin({
      // 对文件进行存放，以及重命名
      filename: 'css/main.css'
    }),
    // css文件压缩
    new optimizeCssAssetsWebpackPlugin()
  ],
  //模式 development--》开发模式  production-->生产模式(进行压缩)
  mode:'development',

  // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：npx webpack-dev-server
  // 下载 cnpm i webpack-dev-server -D
  devServer: {
    contentBase: resolve(__dirname, 'daye'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    //自动打开浏览器
    open: true
  }
}
